<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="questions" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input v-model="questions.keyword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="clear">清空</el-button>
            <el-button class="query-btn" type="primary" @click="onSearch"
              >筛选</el-button
            >
          </el-form-item>
        </el-form>
        <el-alert
          :title="'数据一共' + count + '条'"
          type="info"
          show-icon
        ></el-alert>
      </div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="285px"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="100">
          <template slot-scope="scope">
            <p v-if="scope.row.questionType === '1'">单选</p>
            <p v-else-if="scope.row.questionType === '2'">多选</p>
            <p v-else>简答</p>
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="270">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.questionIDs" :key="index">
              <p class="number" @click="preview(item.id)">
                {{ item.number }}
              </p>
            </div>
          </template></el-table-column
        >
        <el-table-column
          prop="addTime"
          label="录入时间"
          width="225px"
        ></el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"></el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              circle
              @click="delBtn(scope.row)"
              ><i class="el-icon-delete"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="questions.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="questions.pagesize"
          layout="prev, pager, next, sizes, jumper"
          background
          :total="count"
        >
        </el-pagination>
      </div>
    </el-card>
    <questionsPreview
      :isPreviewShow="isPreviewShow"
      :questionItem="questionItem"
      @close="isPreviewShow = false"
    ></questionsPreview>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import questionsPreview from '../components/questions-preview.vue'
export default {
  components: {
    questionsPreview
  },
  data () {
    return {
      questionItem: {},
      isPreviewShow: false,
      questions: {
        keyword: '',
        pagesize: 20,
        page: 1
      },
      tableData: [],
      count: 0,
      currentPage: 1
    }
  },
  created () {
    this.getRandoms()
  },
  methods: {
    clear () {
      this.questions.keyword = ''
      this.questions.page = 1
      this.getRandoms()
    },
    onSearch () {
      this.questions.page = 1
      this.getRandoms()
    },
    async getRandoms () {
      try {
        const { data } = await randoms(this.questions)
        this.tableData = data.items
        this.count = data.counts
      } catch (err) {
        this.$message.success('获取数据失败')
      }
    },
    handleSizeChange (val) {
      this.questions.pagesize = val
      this.getRandoms()
    },
    handleCurrentChange (val) {
      this.questions.page = val
      this.getRandoms()
    },
    async delBtn (row) {
      const config = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
      if (config !== 'confirm') return this.$message('取消删除操作')
      try {
        const data = await removeRandoms(row)
        console.log(data)
        this.$message('删除成功')
        this.getRandoms()
      } catch (err) {
        this.$message('删除失败')
      }
    },
    async preview (id) {
      try {
        this.isPreviewShow = true
        console.log(id)
        const data = await detail({
          id: id
        })
        console.log(data)
        this.questionItem = data
        console.log(data)
        this.isPreviewShow = true
      } catch (err) {
        this.$message('请求失败')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 1300px;
    margin-top: 20px;
    margin-left: 15px;
  }
  /deep/.el-form--inline {
    display: flex;
    justify-content: space-between;
  }
  .el-button--danger {
    background-color: #fef0f0;
    border-color: #fcd9d9;
    .el-icon-delete {
      color: #fcd9d9;
    }
  }
  .el-pagination {
    float: right;
    width: 50%;
    height: 90px;
    display: flex;
    align-items: center;
  }
  .number {
    color: #09f;
    cursor: pointer;
    line-height: 10px;
  }
}
</style>
